<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>柱形图  中间悬空</title>
</head>
<body>
<div id="main" style="height: 500px;width: 500px"></div>
<script src="../echarts/dist/echarts.min.js"></script>
</body>
<script>
    var mychart=echarts.init(document.getElementById('main'));
        option={
            title:{
                text:'成都生活费组成（单位：元）',
                subtext:'你信么？',
                sublink:"http://www.baidu.com"
            },
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    type:'shadow'
                },
                formatter:function(x){
                    var tar=x[0];
                    return tar.name+'</br>'+tar.seriesName+':'+tar.value;
                }
            },
            grid:{//直角坐标系
                left:'3%',
                right:'4%',
                bottom:'3%',
                containLabel:true
            },
            xAxis:{
                type:'category',
                splitLine:{show:false},
                data:['总费用','房租','水电费','交通费','伙食费','日用品数']
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'辅助',
                    type:'bar',
                    stack:'总量',
                    itemStyle:{
                        normal:{
                            barBorderColor:'rgba(0,0,0,0)',
                            color:'rgba(0,0,0,0)'
                        },
                        emphasis:{
                            barBorderColor:'rgba(1,1,1,0)',
                            color:'rgba(1,1,1,0)'
                        }
                    },
                    data:[0,1700,1400,1200,300,0]
                },
                {
                    name:'生活费',
                    type:'bar',
                    stack:'总量',
                    label:{
                        normal:{
                            show:true,
                            position:'inside'
                        }
                    },
                    data:[2900,1200,300,200,900,300]
                }
            ]
        }
    mychart.setOption(option)
</script>
</html>